<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:ui="http://java.sun.com/jsf/facelets"
        >

<h:body>
    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">
            <h:form>
                <p:growl showDetail="true"/>

                <p:panel header="New word">
                    <h:panelGrid columns="7">
                        <h:outputLabel value="Text :" for="txt_text"/>
                        <p:keyboard layout="qwertyBasic" id="txt_text"
                                    value="#{wordBean.newWord.text}" required="true"/>


                        <h:outputLabel value="Language :" for="combo_language"/>
                        <h:selectOneMenu required="true" label="Language" id="combo_language"
                                         value="#{wordBean.newWord.language}" converter="${languageConverter}">
                            <f:selectItems value="#{languageBean.languages}"/>
                        </h:selectOneMenu>


                        <p:commandButton id="lanBtn" icon="ui-icon-plus" type="button"/>
                        <p:overlayPanel id="languagePanel" for="lanBtn" hideEffect="fade" dynamic="true">
                            <h:panelGrid columns="5">
                                <h:outputLabel value="New language :" for="txt_lan"/>
                                <p:inputText id="txt_lan" value="#{languageBean.name}"/>
                                <p:commandButton value="Save" action="#{languageBean.save()}"
                                                 update="combo_language" oncomplete="languagePanel.hide()"/>
                            </h:panelGrid>
                        </p:overlayPanel>

                        <p:commandButton value="Add" action="#{wordBean.createNew}" ajax="true"
                                         update="@form" style="margin:3px" id="btnAdd"/>
                    </h:panelGrid>
                </p:panel>

                <p:poll update="wordList" autoStart="true" interval="10" immediate="true" />

                <p:dataTable id="wordList"
                             value="#{wordBean.wordDataModel}"
                             var="word"
                             styleClass="order-table"
                             headerClass="order-table-header"
                             rowClasses="order-table-odd-row,order-table-even-row"
                             editable="true"
                             emptyMessage="No words found with given criteria"
                             paginator="true" rows="15"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="5,10,15,25,50"
                             selection="#{wordBean.selectedWord}"
                             selectionMode="single"
                             dblClickSelect="true"
                             rowKey="#{word.id}"
                             liveScroll="true"
                        >

                    <p:ajax event="rowEdit" update="@this" listener="#{wordBean.editWord}"/>

                    <p:ajax event="rowSelect" listener="#{wordBean.showTranslations}"/>

                    <!--<p:ajax event="rowUnselect" listener="#{tableBean.onRowUnselect}" update=":form:growl"/>-->

                    <p:column style="width: 100px;">
                        <h:outputText value="#{word.id}"/>
                    </p:column>

                    <p:column headerText="text" filterBy="#{word.text}" filterMatchMode="contains">
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{word.text}"/>
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText value="#{word.text}"/>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column headerText="language"
                              filterBy="#{word.language.name}"
                              filterOptions="#{languageBean.languageItems}"
                              filterMatchMode="exact"
                              style="width: 150px;"
                            >
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{word.language.name}"/>
                            </f:facet>
                            <f:facet name="input">
                                <h:selectOneMenu required="true" label="Language"
                                                 value="#{word.language}" converter="${languageConverter}">
                                    <f:selectItems value="#{languageBean.languages}"/>
                                </h:selectOneMenu>


                                <h:link outcome="languages" value="+" title="+"/>

                                <!--<p:commandButton id="editButton" update=""-->
                                                 <!--icon="ui-icon-edit" outcome="languages"/>-->
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column headerText="">
                        <p:rowEditor id="wordList"/>
                    </p:column>

                    <f:facet name="footer">
                        <h:outputText style="align:right; size: small;"
                                      value="#{fn:length(wordBean.list)} words total."/>
                    </f:facet>
                </p:dataTable>
            </h:form>

        </ui:define>
    </ui:composition>
</h:body>

</html>